BOKEH

WordPress Theme for Blog, Portfolio and Business

Thank you for purchasing BOKEH WordPress Theme. BOKEH is a creative, elegant and clean WordPress theme with a unique ajax powered one page version.

Please follow this documentation to learn more about your purchased theme and be able to create your new website easier and faster.

Install the Theme

1. Install WordPress

First, you must have a wordpress installed on you website. If you don't have a working wordpress installation already, then you should install it before using this theme.

If you have wordpress already installed on your website, PLEASE check if it's running the latest version and upgrade it if its not up to date.

Most web hosting companies will provide you one click wordpress installation through web hosting control panels such as cPanel, Plesk or ... but if you want to install wordpress by yourself, you can follow this tutorial on wordpress codex site or maybe doing some google search.

2. Install Theme

Please DO NOT directly upload the .zip file that you have downloaded, into your WordPress website as it contains some extra items (such as this documentation and ...) and it will cause your website to stop working.
 
The main theme file, is a .zip file named "bokeh.zip" which is included into the main downloaded file.
 
You can install your theme in two ways:
  1. Installing Via WordPress: First log in to wordpress admin area (/wp-admin) and then navigate to "Appearance > Themes". Click on "Add New" button then choose "Upload" and upload your theme (.zip file which is in the downloaded package) by clicking "Choose file" and finally click on "Install Now" button to install the theme.

    Add Theme
    Add a Theme

    Upload the theme
    Upload the theme and install it
     
  2. Install Via FTP: If you want to upload your theme manually, you should first unzip your theme (.zip file which is in the downloaded package). Then you should upload it in your website "/wp-content/themes/". After uploading you should have this directory: "/wp-content/themes/bokeh".

After you have uploaded your theme package to your website hosting (with any of the above ways), now its time to activate the theme. Simply navigate to "Appearance > Themes" and click on "Activate" link from bottom of the theme thumbnail.

 

3. Install Required Plugins

Bokeh is bundled with some useful plugins such as page builder, its elements and all in one widget. These plugins are required to use Bokeh.

Immediately after you install the Theme, You will see a notice on your page which is asking you to install and activate these plugins. Please:

  1. Click on "Begin Installing Plugins".
  2. Check all of the plugins in the list and "Install" them.
  3. Once again go back to this page and "Activate" them all.

install plugins

 

You are almost done!

Now please go to "Appearance > Theme Options" and save your theme options once. Now your theme installations is done.

 

 

Quick Start Your Site

By reading this section, you will be able to kick start your Bokeh Powered website in a few minutes. After you've installed your theme and its required plugins, you should first import demo content to make your site look like our demo at http://preview.themique.com/bwp.

Importing Demo Content

  1. Please go to Tools > Import, and choose "WordPress".

    Import WP demo data
     
  2. If it's the first time that you are using this feature, it will ask you to install import/export plugin. Simply install it.
  3. After it's installed, choose demo_content.xml file which is included In your downloaded package in /demo content/dummy data/demo_content.xml and import it.

    Choose dummy data
     
  4. Now check "Download and import file attachments" and submit it.
  5. It may take a few minutes then your demo content will be imported properly.

Setup Menu

Please go to "Appearance > Menu". Then scroll down the page and at the bottom of the page, in "Theme Locations" check "Main Menu". and save it. That's it! 

Please go to "Appearance > Theme Options > Header Options" then upload your image logo, you may also upload another logo for when sticky menu is enabled. You can also choose "Text Type" if you don't have any image logo available.

Setup Your HomePage

  1. Please go to "Settings > Reading".
  2. Then in "Front page displays" choose "A static page".
  3. Now in Front Page, choose "Home" and leave "Posts page" empty if you want to make your blog page with page builder. If you are going to use the classic mode, then you should choose your blog page here.
If you want to use onepage version as your homepage, then please follow the following instructions.

One Page Version

Flip Menu is the main engine of the Onepage Version. Unlike normal onepage theme which usually have a normal navigation in their header, BOKEH is powered with a unique menu which you may put your menu as flip cards in it.

Once someone clicks on a menu item, all of the menu items will disappear one by one wth a 3d rotate effect and the content of the target page will be shown on the browser.

Flip Menu in OnePage Version

 

If you don't have at least 8 items to put on Flip Menu, you may use simple images on both side of some of menu items without a link to a page or post. 

Each menu item, has 2 sides. Front side is what you see when page loads, and back side is what you see once you move your mouse over each menu item.

How to Create a Menu?

We have a custom post type named "Ajax Menu". To make your onepage 3d rotating navigation menu, please add a new menu in "Ajax Menu" post type:

Add a Menu

Once you click on "Add New" button, a set of items will be append to the form and you will be able to create your first menu item:

Each Item

You Should repeat these steps for each menu item. For example, if you have 8 items, you should "add new" menu item 8 times, and set the title, link and front/back side setting for each item.

 

  1. First, you should choose the title of the menu. For example: "About Us".
  2. Then you should set the link of this menu item. You may choose from "Pages", "Posts", "Custom URL" and also you may set it to "No Link" if you want to have a image only block instead of menu item. The "No Link" option is useful when you don't have enough pages or posts that you want to add in the onepage menu.
  3. Choose the type of each side: Each menu item, will have 2 sides, "Front Side" and "Back Side", you may set the layout of each of these two sides individually. You have the following options for each side:

    - Iconned Menu: This layout will show the title + an icon which you may choose from icon picker
    - Image Menu: This layout will show an image on the side which you are choosing it for
    - Text Menu: This option will let you enter HTML content for the selected side of this menu item

    Flip Menu Layouts
     
  4. Add as many menu items as you wish by clicking on "Add New" button and finally save your menu (post).
  5. The final step is to set this menu as your active One Page menu. You should do this in theme options. You should go to "Appearance > Theme Options > Ajax OnePage" and in "Ajax One Page Menu" section choose this menu post, which you've created recently:

    Set Active Menu
     
  6. Save your theme options.
  7. The final step is to create a "new page", and choose "OnePage Home" as the page template:

    Set Page Template
     
  8. You page is now powered with onepage navigation.

Some More Styling Options

There are two more styling options for One Page Menu:

Different Color Tones for OnePager Menu: By turning this option on, the color of one pager menu items will vary a little.

Random Hue Value: This will apply a random value to each R/G/B colors. The result will be more color variation on the OnePager Menu.

Please see this image to understand the above options better. Please compare the Accent Color with the applied color of the boxes in each setting:

Color Options

 

Put Content in Bokeh

When you are using Bokeh, we would recommend to consider our default style while you are adding content to your site. One of the most important things which will help you to make your pages look good, is using the page title and subtitles and also use our styled heading sections for each section that you add to a page.

Please see this example: 

Page Headings

In Bokeh, by default we start our pages with a Title and a page summary. We would recommend to use this style for all of your pages or posts.

Also, before adding your sections inside a page, please use "heading block" element from Visual Composer page builder to make it look like the following screenshot:

Add Headings

Using Page Builder

One of the most powerful tools which are included into this theme, is its Page Builder. We've used Visual Composer for making our page layouts.
 
Visual Composer is the most popular layout builder plugins on the web. By using it, you can easily create any layouts for your site and then add any elements inside it with the simple drag and drop interface.
 
We've customized Visual Composer and added our own elements into it to let you easily create your page elements in a few seconds.
 
Visual Composer
 
Using Visual Composer is very easy. Here is the step by step instructions:
  1. Add a new page
  2. Click on blue "Visual Composer" button right below the page title.
  3. When Visual Composer UI appears, click on Add Row button to add a new row.
  4. Choose the number of columns that you want to split this row to.
  5. Click on a column to add a new element into it.
  6. From elements gallery choose your desired element.
  7. Set the element configurations and save it.
  8. Now you can see the results on your site! You've created a nice element without coding a single word!

Using VC

 

Magic Widgets

Bokeh has a special custom post named Magic Widget. Magic widget is supposed to be shown in sidebars as a widget.
 
We've added this special post type to let you add any elements such as tabs, accordions, latest portfolio posts, progressbars, iconned services and ... into your sidebars.
 
What you need to do is to simply:
  1. Go to "Magic Widgets" and add a new post.
  2. Enable Visual Composer by clicking on its blue button.
  3. Click on Add Element and add your preferred element into the page.
  4. Save your post.
  5. Then go to "Appearance > Widgets".
  6. Add a new Magic Widget in any sidebars you want.
  7. Choose the post name which you've already added into magic widgets posts. and save it.
  8. Now your element is shown into your site's sidebar area.
IMPORTANT NOTE: Please only add one element into each magic post. Also do not use row with multiple columns in it because it will break your page layout.

Each Magic Post = Only one element in only one column.
 
Please note that not every elements are suitable for placing into sidebars. For example, Awesome tabs are very wide elements and if you add such element into your sidebars, it will not look fine. No way! 

Customizing Your Theme

If you want to customize your theme, We do recommend to use a child theme and edit it instead of editing your core theme files directly.
 
In your downloaded package, we've included a sample child-theme with minimal functionalities which you can simply install it on your theme and activate it as a child theme.
 
You should extract the child theme .zip archive file and put it in this directory:
 
/wp-content/themes/bokeh-child/
 
once you activate this child theme from your WordPress admin, you can copy any files from Bokeh parent theme into this new directory and edit it to make your own changes on it.
 
This way, you can customize Bokeh without changing the theme core files. And now, you can enjoy upgrading your theme to the latest versions without worring of loosing your changes.

 

Theme Translation

Bokeh is translation ready. Currently we are working on other languages such as French, Portuguese and German to include them in the theme.
 
If you want to translate Bokeh into your language, you can download bokeh.pot file from "languages" folder of your theme directory and translate it with a program such as poedit. Then rename it to your language code (such as de_DE.po/de_DE.mo or fr_FR.po/fr_FR.mo or ...) and upload it in your theme "languages" directory.Then simply change the language of your wordpress by changing "WPLANG" parameter in your "wp-config.php" file (This file is in your website root directory).
 
Since WP 4.0, you should be able to change the language from Settings menu in WordPress Dashboard.
 
For example if you have translated your theme in Spanish and you want to change the language of your website to Spanish, update this line in wp-config.php as below:
define('WPLANG', 'es_ES');
There are so many tutorials about this issue on the net so you can google it if you are not familiar with customizing wordpress config file.

You should also translate "Bokeh Premium Theme Add-ons" plugin too. To translate it, make a copy of this file:

/wp-content/plugins/bokeh_addons/languages/bokeh_plugin.pot

and rename it to your preferred language like this:

bokeh_plugin-fr-FR.po
and edit your po file with poedit application and save it again. Please note that the above example is for French language and you should use your own language file name.
 
We will appreciate, if you send us your translated .mo and .po files and let us put it in Bokeh with your name and a link to your website on it.

Upgrade Your Theme

There are two ways to upgrade your theme to the latest version.

Manual Upgrade

  1. Download the latest version.
     
  2. Make a copy from your current Bokeh theme into your FTP. You will find it here:

    /wp-content/themes/bokeh
     
  3. Copy the downloaded file into your FTP and extract it into the above directory.
     
  4. Go to your admin panel, and save your theme options in “Appearance > Theme Options”.
 

Automatic Upgrade (You should only do the following steps once and your theme will be upgraded automatically on next versions)

  1. Download and Install Envato WordPress Toolkit plugin:

    https://github.com/envato/envato-wordpress-toolkit

    You should click on “Download Zip” button on bottom of the right sidebar.
     
  2. You’ll see a message that a newer version of Bokeh is available to install. Simply click on install button.
     
  3. Go to your admin panel, and save your theme options in “Appearance > Theme Options”.
 
We recommend to use the second solution as in this way, next time that release a newer version, you’ll be able to upgrade to the latest versions automatically.
 
Please note that if you've customized and edited your theme files (PHP files and CSS files) manually, you should make a backup before upgrading to the new version and then restore your changes line by line.
 
Of course changes that you've applied in Theme Options and Child Theme are safe and you won't need to worry about them.
 

Credits and Licenses

We want to appreciate and thanks everyone who helped us to make this great theme for you. Specially:
We should note that we used Documenter - by revaxarts.com to create this document for you.

Need Support?

If these documents are not enough of if you have any questions that are not covered in this article, please open a ticket in http://themique.ticksy.com and we'll respond to it as soon as possible.

If you need your purchase code, please see the following image to learn where to find it:

Also your suggestions are very important for us. So please feel free to contact us anytime if you have any suggestions or comments.

Thank you!